<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="title" ref="topFilter">
      <SingleCheck @singleCheck="singleCheck" :nameList="nameList"></SingleCheck>
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="confirmSingleSelectYears">
      </single-list-filter-without-cb>
      <double-check-filter @confirmDoubleSelect="confirmSingleSelectPlanArea" defaultText="统筹区" :filter="filterN"
                           type="planArea" :isParentLinkChild="true"></double-check-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filterN" :type="'insuredTypeSe'"
                                     @confirmSingleSelect="confirmSingleSelectInsuredType"></single-list-filter-without-cb>
      <single-list-filter @confirmSingleSelect="confirmSingleSelectHospitalRankType" defaultText="医院等级"
                          :filter="filterN" type="hospLevel" :isParentLinkChild="true"></single-list-filter>
    </top-filter>
    <div class="chart-container" v-show="isShowChart">
      <div id="hospitalInPeopleNumAnalyseId" class="chart-type1"></div>
      <summarize :showSummarizeText="conclusion"></summarize>
    </div>
  </div>
</template>

<script>
  import SingleCheck from '../../last/filter/single-check'
  import {setChartHeight, loadingOpt} from '../../../assets/js/utils.js'
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import DoubleCheckFilter from '../filter/double-check-filter.vue'
  import SingleListFilter from '../filter/single-list-filter.vue'
  import TopFilter from '../filter/top-filter1.vue'
  import Summarize from '../summarize/summarize.vue'
  import {straightSideOption} from '../../common/mixin'
  import {getHospitalInPeopleNumData} from '../../../api/last-api'
  import {
    getDefaultYear,
    getDefaultAreaCode,
    getDefaultHospLevel,
    getDefaultInsuredTypeWithoutAll
  } from './utils/dataUtils'
  export default {
    props: ['isChange', 'filter'],
    watch: {
      isChange(){
        setTimeout(() => {
          this.myChart.resize();
        }, 101)
      }
    },
    components: {
      SingleCheck,
      Summarize,
      TopFilter,
      SingleListFilterWithoutCb,
      DoubleCheckFilter,
      SingleListFilter
    },
    data () {
      return {
        isShowChart: true,
        nameList: ['人次', '人数'],
        filterN: JSON.parse(JSON.stringify(this.filter)),
        chartOptions: JSON.parse(JSON.stringify(straightSideOption)),
        title: '',
        conclusion: '',
        areaCode: getDefaultAreaCode(this.filter).join(','),
        hospLevel: getDefaultHospLevel(this.filter),
        medicalCategory: getDefaultInsuredTypeWithoutAll(this.filter),
        queryYear: getDefaultYear(this.filter),
        type: '0'
      }
    },
    mounted(){
      setChartHeight()
      this.myChart = this.$echarts.init(document.getElementById('hospitalInPeopleNumAnalyseId'), null, {renderer: 'canvas'})
      this.getHospitalInPeopleNumData();
//      this.setDataIntoCharts(require('./test/hospitalInNumAnalyse.json').data)
    },
    methods: {
      drawHospitalInPeopleNumLine(){
        this.myChart.setOption(this.chartOptions);
      },
      getHospitalInPeopleNumData() {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.myChart.clear();
          this.myChart.showLoading(loadingOpt)
          // 获取医院就诊人次人数占比分析数据
          getHospitalInPeopleNumData(this.areaCode, this.hospLevel, this.medicalCategory, this.queryYear, this.type).then(response => {
            this.myChart.hideLoading();
            if (response.code == 0) {
              this.isShowChart = true;
              this.setDataIntoCharts(response.data)
            } else {
              this.isShowChart = false;
            }
          }).catch(err => {
            this.isShowChart = false;
          })
        }, 300)
      },
      setDataIntoCharts(response) {
        // 设置顶部的标题
        this.title = response.reportName
        // 设置结论
        this.conclusion = response.reportConclusion
        // 清空直方图数据,纵坐标数值
        this.chartOptions.yAxis[0].data = []
        this.chartOptions.yAxis[1].data = []
        // 清空平均增长率的数据
        this.chartOptions.series[0].data = []
        // 清空当前年份的直方图数据
        this.chartOptions.series[1].data = []
        // 清空去年年份的直方图数据
        this.chartOptions.series[2].data = []

        let curYear = this.queryYear + '年'
        let lastYear = this.queryYear - 1 + '年'
        this.chartOptions.legend.data = [curYear, lastYear]
        this.chartOptions.series[1].name = curYear
        this.chartOptions.series[2].name = lastYear
        this.chartOptions.series[1].markLine.data[0].name = curYear
        this.chartOptions.series[2].markLine.data[0].name = lastYear

        this.chartOptions.series[0].markLine.data[0].tooltip = {
          show: true,
          formatter: function (par) {
            return `<span style="color:${par.color}">平均增长率</span><br><span style="color:#c7c7c7">${par.value}%</span>`
          }
        }

        this.chartOptions.series[1].markLine.data[0].tooltip = {
          show: true,
          formatter: function (par) {
            return `<span style="color:${par.color}">${curYear}</span><br><span style="color:#c7c7c7">${par.value}%</span>`
          }
        }
        this.chartOptions.series[2].markLine.data[0].tooltip = {
          show: true,
          formatter: function (par) {
            return `<span style="color:${par.color}">${lastYear}</span><br><span style="color:#c7c7c7">${par.value}%</span>`
          }
        }

        this.chartOptions.series[0].tooltip = {
          show: true,
          formatter: function (par) {
            let i = par.dataIndex;
            let txt = `<span style="color:${par.color}">${response.medInstitutionList[i]}</span><br><span style="color:#c7c7c7">增长率：${par.value}%</span>`
            return txt;
          }
        }
        this.chartOptions.series[1].tooltip = {
          show: true,
          formatter: function (par) {
            let i = par.dataIndex;
            let txt = `<span style="color:${par.color}">${response.medInstitutionList[i]}</span><br><span style="color:#c7c7c7">${par.seriesName}：${par.value}%</span>`
            return txt;
          }
        }
        this.chartOptions.series[2].tooltip = {
          show: true,
          formatter: function (par) {
//            console.log(par)
            let i = par.dataIndex;
            let txt = `<span style="color:${par.color}">${response.medInstitutionList[i]}</span><br><span style="color:#c7c7c7">${par.seriesName}：${par.value}%</span>`
            return txt;
          }
        }

        this.chartOptions.title.subtext = ''
        // 截取字段
        let hosName = [];
        response.medInstitutionList.map((item, index) => {
          let length = item.length;
          if (length > 7) {
            item = item.substring(0, 7) + '...'
          }
          hosName.push(item);
        })
        this.chartOptions.yAxis[0].data = hosName
        this.chartOptions.yAxis[1].data = hosName

        this.chartOptions.series[0].data = response.institutionGrowthRateList
        this.chartOptions.series[1].data = response.cyProportionList
        this.chartOptions.series[2].data = response.lyProportionList

        this.chartOptions.visualMap[0].pieces[0].max = this.avg(response.institutionGrowthRateList)
        this.chartOptions.visualMap[0].pieces[1].min = this.avg(response.institutionGrowthRateList)

        this.chartOptions.series[1].markLine.data[0].xAxis = response.cyAvgProportion
        this.chartOptions.series[2].markLine.data[0].xAxis = response.lyAvgProportion

        this.drawHospitalInPeopleNumLine()
      },
      avg(arry){
        let sum = 0;
        let len = arry.length;
        for (let i = 0; i < len; i++) {
          sum += arry[i];
        }
        let d = parseInt((sum / len) * 100) / 100;
        return d;
      },
      singleCheck(type){
        if (type == 1) {
          this.type = 0
        } else {
          this.type = 1
        }
        this.getHospitalInPeopleNumData();
      },
      confirmSingleSelectYears(filter) {
        this.queryYear = filter
        this.getHospitalInPeopleNumData();
      },
      confirmSingleSelectPlanArea(filter) {
        this.areaCode = filter.join(',')
        this.getHospitalInPeopleNumData();
      },
      confirmSingleSelectInsuredType(filter){
        this.medicalCategory = filter
        this.getHospitalInPeopleNumData();
      },
      confirmSingleSelectHospitalRankType(filter) {
        this.hospLevel = filter.join(',')
        this.getHospitalInPeopleNumData();
      },
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  @import "../../../assets/css/last-charts.css";
</style>
